import React from 'react';

/**
 * 加载动画组件
 * 功能：提供纯粹的loading动画效果，无任何文字或图标
 * 特性：
 * - 自定义CSS动画：使用@keyframes创建彩色圆点动画
 * - 性能优化：使用React.memo避免不必要的重渲染
 * - 可复用：可在多个组件中使用
 */

/**
 * 纯loading动画组件
 * 只包含动画，无任何文字或图标
 * 使用React.memo优化重渲染
 */
export const LoadingAnimation: React.FC = React.memo(() => {
  return (
    <>
      {/* 动画样式 */}
      <style>{`
        @keyframes ld4 {
          0% { opacity: 0; transform: scale(0.3); background: #59CD90; }
          25% { opacity: 1; transform: scale(1.8); background: #0072BB; }
          50% { opacity: 0; transform: scale(0.3); background: #FE4A49; }
          75% { opacity: 1; transform: scale(1.8); background: #FED766; }
          100% { opacity: 0; }
        }
      `}</style>
      
      {/* 动画容器 */}
      <div className="loader" style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
        <div id="ld4" style={{ display: 'flex', width: 80, justifyContent: 'space-between' }}>
          <div style={{ height: 12, width: 12, borderRadius: '50%', background: '#D91E36', animation: 'ld4 3s linear infinite 0s' }}></div>
          <div style={{ height: 12, width: 12, borderRadius: '50%', background: '#D91E36', animation: 'ld4 3s linear infinite 0.15s' }}></div>
          <div style={{ height: 12, width: 12, borderRadius: '50%', background: '#D91E36', animation: 'ld4 3s linear infinite 0.3s' }}></div>
          <div style={{ height: 12, width: 12, borderRadius: '50%', background: '#D91E36', animation: 'ld4 3s linear infinite 0.45s' }}></div>
        </div>
      </div>
    </>
  );
});

// 显示名称用于调试
LoadingAnimation.displayName = 'LoadingAnimation';

interface LoadingBubbleProps {
  aiAvatar?: string;
  type?: 'text' | 'audio'; // 新增：loading类型
}

/**
 * AI思考时的加载气泡组件
 * 支持文本和音频的统一loading动画
 * 使用自定义loading动画效果，添加React.memo优化
 */
const LoadingBubble: React.FC<LoadingBubbleProps> = React.memo(({ aiAvatar }) => {
  return (
    <div className="flex justify-start mb-4">
      {/* AI头像 */}
      <div className="w-10 h-10 rounded-full overflow-hidden flex-shrink-0 mr-3">
        {aiAvatar ? (
          <img
            src={aiAvatar}
            alt="AI"
            className="w-full h-full object-cover"
          />
        ) : (
          <div className="w-full h-full bg-gray-600 flex items-center justify-center">
            <i className="fas fa-robot text-gray-400 text-sm"></i>
          </div>
        )}
      </div>
      
      {/* 加载气泡 */}
      <div 
        className="rounded-2xl rounded-bl-md px-4 py-4"
        style={{ backgroundColor: 'rgb(37,37,37)', minWidth: 180 }}
      >
        <div className="flex items-center justify-center">
          <LoadingAnimation />
        </div>
      </div>
    </div>
  );
});

export default LoadingBubble; 